<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>作业2</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <button id="add" type="button" class="btn btn-default">增加</button>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
        </tbody>
    </table>
    <!-- 删除 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        您确认删除以下信息吗？
                    </h4>
                </div>
                <div class="modal-body">
                    <span>姓名：</span><input disabled id="name" />
                    <span>ID：</span><input disabled id="id" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="sure" class="btn btn-primary">
                        确认删除
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 修改 -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请填写信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="box1">
                        <div class="row">
                            <label class="col-sm-3">ID：</label><input id="id1" type="text" disabled>
                        </div>
                        <div class="row">
                            <label class="col-sm-3">名称：</label><input id="name1" type="text">
                        </div>
                        <div class="row">
                            <label class="col-sm-3">城市：</label><select id="city1" class="col-sm-3">
                                <option>重庆</option>
                                <option>成都</option>
                                <option>广州</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 新增 -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请填写信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="box1">
                        <div class="row">
                            <label class="col-sm-3">ID：</label><input id="addId" type="text" disabled>
                        </div>
                        <div class="row">
                            <label class="col-sm-3">名称：</label><input id="addName" type="text">
                        </div>
                        <div class="row">
                            <label class="col-sm-3">城市：</label><select id="addCity" class="col-sm-3">
                                <option>重庆</option>
                                <option>成都</option>
                                <option>广州</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm1">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
        const data = [
            { id: 1, name: "李四", city: "重庆" },
            { id: 2, name: "张三", city: "成都" },
        ];
        function render(data) {
            $("tbody").empty()
            for (let i = 0; i < data.length; ++i) {
                let item = data[i]
                $("tbody").append(`<tr>
                    <td >${item.name}</td>
                    <td >${item.city}</td>
                    <td>
                        <button data-id="${item.id}" id="del" type="button" class="btn btn-danger">删除</button>
                        <button data-id="${item.id}" id="revise" type="button" class="btn btn-info">修改</button>
                    </td>
                </tr>`)
            }
        }
        render(data)
        $("tbody").on("click", "#del", function (event) {
            $('#myModal').modal('show')
            let dataId = parseInt($(event.target).attr("data-id"))
            for (let i = 0; i < data.length; ++i) {
                let item = data[i]
                // console.log(item)
                if (dataId === item.id) {
                    $("#name").val(item.name)
                    $("#id").val(item.id)
                }
            }

        })
        $("#sure").on("click", function () {
            for (let i = 0; i < data.length; ++i) {
                let item = data[i]
                let idv = parseInt($("#id").val())
                // console.log(dataId)
                if (idv === item.id) {
                    data.splice(i, 1)
                }
            }
            $('#myModal').modal('hide')
            render(data)
        })
        $("tbody").on("click", "#revise", function (event) {
            $('#myModal1').modal('show')
            let dataId = parseInt($(event.target).attr("data-id"))
            for (let i = 0; i < data.length; ++i) {
                let item = data[i]
                if (dataId === item.id) {
                    $("#id1").val(item.id)
                    $("#name1").val(item.name)
                    $("#city1").val(item.city)
                }
            }
        })
        // 确认
        $("#confirm").on("click", function () {
            let id = parseInt($("#id1").val());
            let name = $("#name1").val();
            let city = $("#city1").val();
            for (let i = 0; i < data.length; i++) {
                if (data[i].id == id) {
                    data[i].id = id;
                    data[i].name = name;
                    data[i].city = city;
                }
            }
            $("#myModal1").modal("hide");
            render(data);
        })

        let index = 2

        $("#add").on("click", function () {
            $('#myModal2').modal('show')
            index += 1
            $("#addId").val(index)

        })
        $("#confirm1").on("click", function () {
            let addId = parseInt($("#addId").val())
            let addName = $("#addName").val()
            let addCity = $("#addCity").val()
            data.push({
                id: addId,
                name: addName,
                city: addCity
            })
            $("#myModal2").modal("hide");
            render(data)
        })

    </script>
</body>

</html>